<template>
  <!-- 碳排放规划配置 -->
  <div class="carbon-emission-plan-box">
    <div class="CardItems-box">
      <CardItems
        ref="carbonEmissionPlanRef"
        :tabs-active="tabsActive"
        :tabs-list="tabsList"
        :card-config="cardConfig"
        :pop-config="popConfig"
        :select-config="selectConfig"
        :header-config="headerConfig"
        :dynamic-select-list="selectList"
        @selectChange="selectChange"
      />
    </div>
  </div>
</template>

<script>
import CardItems from '@/components/CardItems'
import { cardConfig } from './config/cardConfig'
import { popConfig } from './config/popConfig'
import { headerConfig } from './config/tableConfig'
import { selectConfig } from './config/selectConfig'
export default {
  name: 'CarbonEmissionPlan',
  components: {
    CardItems
  },
  data() {
    return {
      selectList: [],
      tabsActive: {
        name: '已规划',
        code: 'gc',
        prop: 'sceneType',
        value: 1
      },
      tabsList: [
        {
          name: '已规划',
          code: 'gc',
          prop: 'sceneType',
          value: 1
        },
        {
          name: '未规划',
          code: 'gd',
          prop: 'sceneType',
          value: 2
        }
      ]
    }
  },
  computed: {
    /**
     * 卡片配置
     */
    cardConfig() {
      return cardConfig[`carbon-emission-plan-${this.tabsActive.value}`] || {}
    },
    /**
     * 弹窗配置
     */
    popConfig() {
      return popConfig['carbon-emission-plan'] || {}
    },
    /**
     * 筛选配置
     */
    selectConfig() {
      return selectConfig['carbon-emission-plan'] || []
    },
    /**
     * 表头配置
     */
    headerConfig() {
      return headerConfig[`carbon-emission-plan-${this.tabsActive.value}`] || []
    }
  },
  methods: {
    /**
     * @param selectData   回传表单的选择数据
     * @param prop        事件触发的表单字段
     * @param selectList  回传的表单配置项
     */
    selectChange(selectData, prop, selectList) {
      if (prop === 'sceneProjectId') {
        this.commonSelected(
          1,
          selectList,
          {
            code: 'SceneEdificeSelected',
            param: selectData[prop]
          },
          selectData
        )
      }
    },
    /**
     * 查询联动数据
     */
    commonSelected(idx, selectList, param, selectData) {
      this.selectList = JSON.parse(JSON.stringify(selectList))
      console.log('-=-=param', param);
      this.$api.commonSelected(param).then((res) => {
        const optionList = res.data.map((item) => ({
          ...item,
          name: item.label,
          code: item.value
        }))
        const configItem = selectList[idx]
        configItem.optionList = optionList
        this.$set(this.selectList, idx, {
          ...configItem
        })
        this.$refs.carbonEmissionPlanRef.setSelectModuleValue({
          ...selectData,
          sceneEdificeId: ''
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.carbon-emission-plan-box {
  display: flex;
  width: 100%;
  height: 100%;

  .CardItems-box {
    flex: 1;
  }
}
</style>
